<template>
  <div class="orderDetails">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1"></el-tab-pane>
        <el-tab-pane label="稿件文件" name="2"></el-tab-pane>
        <el-tab-pane label="留言" name="3"></el-tab-pane>
        <template v-if="activeName==1">
            <div class="infobox">
                <div class="info_title">稿件信息</div>
                <el-row :gutter="10">
                    <el-col :span="3">订单编号</el-col>
                    <el-col :span="9">{{info.orderNum}}</el-col>
                    <el-col :span="3">联系方式</el-col>
                    <el-col :span="9">{{info.phoneNumber}}</el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="3">文章标题</el-col>
                    <el-col :span="9">{{info.orderTitle}}</el-col>
                    <el-col :span="3">邮箱</el-col>
                    <el-col :span="9">{{info.email}}</el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="3">所属学科</el-col>
                    <el-col :span="9">{{info.parentSubjectName}}</el-col>
                    <el-col :span="3">提交时间</el-col>
                    <el-col :span="9">{{info.createTime}}</el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="3">作者</el-col>
                    <el-col :span="9">{{info.userName}}</el-col>
                    <el-col :span="3">稿件字数</el-col>
                    <el-col :span="9">{{info.codeNum}}</el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="3">摘要</el-col>
                    <el-col :span="9">{{info.remark}}</el-col>
                </el-row>
                <div class="info_title">所选服务</div>
                <el-row :gutter="10">
                    <el-col :span="3">一级服务</el-col>
                    <el-col :span="9">{{info.firstServiceName}}</el-col>
                    <el-col :span="3">二级级服务</el-col>
                    <el-col :span="9">{{info.serviceName}}</el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="3">服务功能</el-col>
                    <el-col :span="9">完成时间：{{info.finishDayNumName?info.finishDayNumName:'--'}}</el-col>
                    <el-col :span="3">服务功能</el-col>
                    <el-col :span="9">查重率：{{info.repeatNumName?info.repeatNumName:'--'}}</el-col>
                </el-row>
            </div>
        </template>
        <template v-if="activeName==2">
            <div class="infobox">
                <div class="info_title">稿件文件 <el-button v-if='info.state==0' @click="addFile" size="mini" type="primary">修改稿件状态</el-button></div>
                <el-table v-loading="loading" :data="tabelList" >
                    <el-table-column v-for='(it,inx) in columnlist' :key="inx" align="center" :label="it.label" :prop="it.prop" />
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="downUpload(scope.row)" type='text'>下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
        <template v-if="activeName==3">
            <div class="infobox infodescbox">
                <el-input v-model="valueInput" placeholder="请输入内容"><template slot="append"><el-button @click="addmessage" style="background:#1890ff;color:#fff;" type="primary">发表留言</el-button></template></el-input>
            </div>
            <div class="infobox">
                <el-table v-loading="loading" :data="descArr" class="tabelBox" :show-header='false'>
                    <el-table-column v-for='(it,inx) in desclist' :key="inx" :align="it.label?it.label:'center'" :label="it.label" :width="it.width" :prop="it.prop" />
                </el-table>
            </div>
        </template>
    </el-tabs>
    <el-dialog
    title="修改稿件状态"
    :visible.sync="dialogVisible"
    width="600px"
    class="showdialog"
    center
    :before-close="handleClose">
    <el-form ref="form" :model="resform" label-width="120px">
        <div class="tioop_title">提示：点击【完成】/【退回】之后将不允许上传稿件，请慎重</div>
        <el-form-item label="稿件状态：">
            <el-radio v-model="resform.status" label="2">退回</el-radio>
            <el-radio v-model="resform.status" label="1">完成</el-radio>
        </el-form-item>
        <el-form-item label="上传稿件：">
            <el-upload
                :headers="headers"
                :action="uploadUrl"
                :before-upload="handleBeforeUpload"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                name="file"
                :file-list="fileList"
                :before-remove='removeItem'
                :limit="1"
                ref="upload" >
                <el-button size="mini" :disabled='fileList.length!=0' type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="servebtn">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
import {getOrderDetailById ,updateOrderState, addLeaveMessage , addOrderAttachment , download} from "@/api/pc.js"
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: {
            Authorization: "Bearer " + getToken()
        },
        activeName:'1',
        dialogVisible:false,
        resform:{status:''},
        info:{},
        tabelList:[],
        loading:false,
        columnlist:[
            {label:'文件名称',prop:'fileName'},
            {label:'上传用户',prop:'userName'},
            {label:'上传时间',prop:'createTime'},
        ],
        valueInput:'',
        descArr:[ ],
        desclist:[
            {width:160,label:'文件名称',prop:'createTime'},
            {width:160,label:'文件名称',prop:'username'},
            {align:'left',label:'文件名称',prop:'messageInfo'},
        ],
        fileList:[],
    };
  },
  created(){
    this.getdata();
  },
  methods:{
    // 关闭弹窗
    handleClose(){
        this.dialogVisible = false;
    },
    handleClick(){

    },
    //获取数据
    getdata(){
        getOrderDetailById({orderId:this.$route.query.orderId}).then(res=>{
            if(res.code==200){
                this.info = res.data.orderInfo;
                this.info.finishDayNumName = this.info.finishDayNum?JSON.parse(JSON.parse(res.data.orderInfo.serviceInfo).finishTime.list).filter(it=>{return it.value == this.info.finishDayNum})[0].label:'';
                this.info.repeatNumName =this.info.repeatNum? JSON.parse(JSON.parse(res.data.orderInfo.serviceInfo).repeatNum.list).filter(it=>{return it.value == this.info.repeatNum})[0].label:'';
                this.tabelList = res.data.attachments;
                this.descArr = [];
                res.data.leaveMessages.forEach(it=>{
                    it.createTime=it.createTime.replace("T",' '); 
                    this.descArr.push(it)
                });
            }
        })
    },
    //下载
    downUpload(val){
        console.log( process.env.VUE_APP_BASE_API)
        let url = val.fileUrl.indexOf('://')?val.fileUrl.split('://')[1].split('//')[1]:''
        if(url){
            // window.location.href = process.env.VUE_APP_BASE_API +  '/common/download/resource?resource=/' + url
            window.open(process.env.VUE_APP_BASE_API +  '/common/download/resource?resource=/' + url)
        }
    }, 
    //添加留言
    addmessage(){
        if(!this.valueInput){
            return this.$message.warning('请填写留言')
        }
        let obj = {
            orderId:this.$route.query.orderId,
            messageInfo:this.valueInput,
        }
        addLeaveMessage(obj).then(res=>{
            if(res.code==200){
                console.log(res)
                this.valueInput = "";
                this.getdata();
            }
        })
    },
    //上传文件
    addFile(){
        this.dialogVisible = true;
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
        let size = 10;
        // 校检文件大小
        if (size) {
            const isLt = file.size / 1024 / 1024 < size;
            if (!isLt) {
                this.$message.error(`上传文件大小不能超过10MB!`);
                return false;
            }
        }
        return true;
    },
    handleUploadSuccess(res, file) {
        // 如果上传成功
        if (res.code == 200) {
            // 获取光标所在位置
            console.log(res)
            res.name = res.realName;
            this.fileList=[res];
            // let obj = {
            //     fileUrl:res.fileName,fileName:res.realName,
            //     typeId:this.$route.query.orderId,
            // }
        } else {
            this.$message.error(res.msg);
        }
    },
    servebtn(){
        if(!this.resform.status){
            this.$message.warning('请选择一个稿件状态')
        }
        if(this.fileList.length>0){
            let obj = {
                fileUrl:this.fileList[0].fileName,
                fileName:this.fileList[0].realName,
                typeId:this.$route.query.orderId,
            }
            addOrderAttachment(obj).then(res=>{
                if(res.code==200){
                    this.dialogVisible = false;
                    this.$message.warning("操作成功")
                    updateOrderState({orderId:this.$route.query.orderId,state:this.resform.status * 1}).then(res=>{
                        if(res.code==200){
                            console.log(res.code==200)
                            this.getdata();
                        }
                    })
                }
            })
        }
        
    },
    //删除文件
    removeItem(file,fileList,index){
        this.fileList = fileList;
    },
    handleUploadError() {
        this.$message.error("上传失败");
    },
  }
};
</script>
<style lang='scss' scoped>
.orderDetails{
    width: 100%;
    height: 100%;
    padding: 20px 40px;
    .infobox{
        width: 100%;
        height: 100%;
        // background-color: #f00;
        .info_title{
            font-size: 16px;
            font-weight: 600;
            line-height: 50px;
        }
        .info_upload{
            float: right;
        }
        .tabelBox{
            margin-top: 20px;
        }
        .el-row{
            height: 40px;
        }
    }
    .infodescbox{
        width: 600px;
        
    }
}
.tioop_title{
    font-size: 16px;
    color: #f00;
    padding-left: 38px;
    margin-bottom: 20px;
}

</style>
<style scoped>
.showdialog /deep/.el-dialog__header{
    border-bottom: 1px solid #e6e6e6;
}
.showdialog /deep/.el-dialog__footer{
    border-top: 1px solid #e6e6e6;
    padding-bottom: 10px;
}
</style>